<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <!-- 动态创建下拉列表。并且默认选中上海 -->
    <select name="" id="sel">
    </select>
    <script>

        let data = [
            { name: '北京', value: 1 },
            { name: '上海', value: 2 },
            { name: '天津', value: 3 },
            { name: '重庆', value: 4 },
        ];

        let sel = document.getElementById('sel')
        function fn({ name: text, value }) {

            return `<option value="${value}">${text}</option>`
        }
        let str = ''
        data.forEach(element => str += fn(element))
        sel.innerHTML = str
        sel.onchange = function () {
            console.log(this.value) //直接拿到选中的value
            let index = this.selectedIndex //拿到再次选中的索引值
            let selOpt = this.options[index]
            console.log(selOpt.text, selOpt.value)
        }
        var provs = [
            { name: "江西省", cities: ["南昌市", "景德镇", "九江", "鹰潭", "萍乡", "新馀", "赣州", "吉安", "宜春", "抚州", "上饶"] },
            { name: "福建省", cities: ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"] },
            { name: "河北省", cities: ["石家庄", "邯郸", "邢台", "保定", "张家口", "承德", "廊坊", "唐山", "秦皇岛", "沧州", "衡水"] },
            { name: "四川省", cities: ["成都市", "自贡市", "攀枝花市", "泸州市", "德阳市", "绵阳市", "广元市", "遂宁市", "内江市", "乐山市", "南充市", "眉山市"] },
            { name: "山西省", cities: ["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"] },
            { name: "山西省", cities: ["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"] },
            { name: "内蒙古", cities: ["呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市", "鄂尔多斯市", "呼伦贝尔市", "巴彦淖尔市", "乌兰察布市", "兴安盟"] },
            { name: "海南省", cities: ["海口市", "三亚市"] },
            { name: "贵州省", cities: ["兰州市", "嘉峪关市", "金昌市", "白银市", "天水市", "武威市", "张掖市", "平凉市", "酒泉市"] },
            { name: "青海省", cities: ["西宁市", "海东地区", "海北藏族自治州", "黄南藏族自治州", "海南藏族自治州"] }
        ]







        // let frg = document.createDocumentFragment()
        // data.forEach(element => {
        //     let option = document.createElement('option')
        //     option.value = element.value
        //     option.text = element.name
        //     option.value == 2 ? option.selected = true : null
        //     frg.appendChild(option)
        // })
        // sel.appendChild(frg)






    </script>
</body>

</html>